import React, { useState, useEffect, useRef, useImperativeHandle } from 'react';
import { connect } from 'dva';
import { Tooltip, Row, Col, Form, Input, Button, Modal } from 'antd';
import SlickTable from '@/components/SlickTable';
import useSlickTableTemp from '@/hooks/useSlickTableTemp';
import { getItem } from '@/utils/utils';
import set from 'lodash/set';

const namespace = 'busiObjManage';

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

// 判断空对象
const isEmptyObject = obj => {
  if (Object.keys(obj).length === 0) {
    return true;
  }
  return false;
};

function SelectParentBusiObj(props) {
  const [params, setParams] = useState({}); // 查询条件
  const [selectRow, setSelectRow] = useState({});

  const { tableProps } = useSlickTableTemp(
    { pageSize: 5 },
    'pmc/pms/busiObj/queryParentPage',
    params
  );

  const handleSearch = value => {
    setParams({
      ...params,
      gb_reset: true,
      busiObjNbrOrName: value,
    });
  };

  const handleSelectRows = record => {
    if (!isEmptyObject(record) && record.length > 0) {
      setSelectRow(record[0]);
    } else {
      setSelectRow({});
    }
  };

  // 选中行记录
  useImperativeHandle(props.cRef, () => ({
    handleSelectParentObj: () => {
      return new Promise(function(resolve) {
        resolve(selectRow);
      });
    },
  }));

  const cellStyle = {
    maxWidth: 200,
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis',
    cursor: 'pointer',
  };

  const columns = [
    {
      title: '业务对象编码',
      dataIndex: 'busiObjNbr',
    },
    {
      title: '业务对象名称',
      dataIndex: 'busiObjName',
      onCell: () => {
        return {
          style: cellStyle,
        };
      },
      render: text => (
        <Tooltip placement="topLeft" title={text}>
          {text}
        </Tooltip>
      ),
    },
    {
      title: '业务对象描述',
      dataIndex: 'busiObjDesc',
    },
  ];

  return (
    <div>
      <Form style={{ marginBottom: 10 }}>
        <Row>
          <Input.Search
            style={{ width: '200px' }}
            placeholder="业务对象名称、编码搜索"
            onSearch={handleSearch}
          />
        </Row>
      </Form>
      <SlickTable
        rowKey={record => record.busiObjId}
        columns={columns}
        pick="radio"
        {...tableProps}
        onSelectRow={handleSelectRows}
      />
    </div>
  );
}

export default connect(({ setting }) => ({}))(Form.create()(SelectParentBusiObj));
